<template>
  <div class="login-form">
    <div class="form-tel-number border-bottom">
      <input type="number" class="tel-number-input" placeholder="请输入手机号码" v-model="phoneNumber"/>
    </div>
    <div class="form-tel-code border-bottom">
      <input type="text" class="tel-code-input" placeholder="请输入短信验证码" v-model="identifyCode"/>
      <div v-if="countDownNum === 0" @click="getIdentifyCode('sms')" class="get-tel-code-btn">获取验证码</div>
      <div v-else class="disabled-code-btn">剩余（{{countDownNum}}s）</div>
    </div>
    <voice-auth-code class="voice-auth-code" ref="voiceAuthCode" @sendVoiceSms="getIdentifyCode"></voice-auth-code>
    <button class="login-button" :disabled="btnDisabled" @click="login">登&nbsp;&nbsp;录</button>
    <div class="reg-tip">还没有账号？<router-link tag="span" to="/registe" class="reg-btn">立即注册</router-link></div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { httpReq } from '@/common/api'
import voiceAuthCode from '@/components/voiceAuthCode.vue'
export default {
  name: 'LoginForm',
  data () {
    return {
      countDownNum: 0,
      message: '',
      phoneNumber: '',
      identifyCode: '',
      btnDisabled: false,
    }
  },
  components:{
    voiceAuthCode
  },
  methods: {
    countDown(){
      this.countDownNum = 60
      let clock = setInterval(()=> {
        this.countDownNum--
        if (this.countDownNum === 0) {
          clearInterval(clock)
        }
      }, 1000)
    },
    login: function () {
      if (!this.phoneNumber) {
        this.$toast('请填写手机号码')
        return
      }
      const telReg = /^1[3|5|7|8|4|6|9][0-9]{9}$/
      if (!telReg.test(this.phoneNumber)) {
        this.$toast('手机号码填写有误')
        return
      }
      if (!this.identifyCode) {
        this.$toast('请填写验证码')
        return
      }
      const data = {
        channel: 'h5',
        mobile: this.phoneNumber,
        code: this.identifyCode
      }
      this.btnDisabled=true;
      httpReq('POST','/h5api/CASH_LOAN/login/v1.0',{},data).then((res)=>{
        this.changeUserTel(this.phoneNumber)
        this.changeUserToken(res.accessToken)
        this.$router.push('/index');
        this.btnDisabled=false;
      }).catch((err)=>{
        this.$toast(err)
        this.btnDisabled=false;
      })
    },
    ...mapMutations(['changeUserTel', 'changeUserToken']),
    getIdentifyCode: function (type) {
      if (!this.phoneNumber) {
        this.$toast('请填写手机号码')
        return
      }
      const telReg = /^1[3|5|7|8|4|6|9][0-9]{9}$/
      if (!telReg.test(this.phoneNumber)) {
        this.$toast('手机号码填写有误')
        return
      }
      const params = {
        mobile: this.phoneNumber,
        type:1
      };
      switch (type){
        case 'sms':
          httpReq('POST','/list/finance/app/sendSms',params).then((res)=>{
            this.$toast('验证码已发送，请注意查收');
            this.countDown()
          }).catch((err)=>{
            this.$toast(err)
          })
              break;
        case 'voice':
          httpReq('POST','/list/finance/app/sendSms/Voice',params).then((res)=>{
            this.$refs.voiceAuthCode.showTip()
            this.countDown()
          }).catch((err)=>{
            this.$toast(err)
          })
          break;
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .voice-auth-code
    margin-top 15px
  .login-form
      padding :.5rem
      padding-top :.7rem
    input::-webkit-input-placeholder
      color :$placeholderColor
      letter-spacing:.01rem
    .form-tel-number, .form-tel-code
      padding :.4rem .1rem
    .form-tel-code
      display :flex
      justify-content space-between
      align-items center
      .get-tel-code-btn
        color :$textButton
      .disabled-code-btn
        color :$disabledText
    .register-protocal
      display :flex
      align-items center
      margin :.4rem 0
      .img-check
        width :.56rem
        height :.56rem
      .protocal-content
        font-size :.26rem
        .user-register-protocal
          color :$textButton
    .login-button
      margin-top :.6rem
      width :100%
      height :.88rem
      border-radius :.08rem
      line-height :.88rem
      font-size :.32rem
      background :linear-gradient(to right, $gradientDeep , $gradientTint)
      color :white
    .reg-tip
      margin-top :1rem
      text-align center
    &.reg-btn
      color :$textButton
</style>
